<script setup lang="ts">
import { reactive, ref, watch } from "vue";
import roleConflictServiceApi from "@/api/modules/org/bean/role-conflict";
import roleServiceApi from "@/api/modules/org/bean/role";
import { SelectOptionKeyType } from "@whjxtech/jxtech-component";
import { SYSTEM_CONFIG } from "@/config/system";

interface IDialogProps {
  visible?: boolean;
  roleId: string;
}
const emit = defineEmits<{
  (e: "update:visible", val: boolean): void;
  (e: "save-success"): void;
}>();

const rules = {
  roleid2: [{ required: true, message: "请选择互斥角色", trigger: "change" }]
};

const props = withDefaults(defineProps<IDialogProps>(), {
  visible: false
});
const visibleRef = ref(props.visible);

const RoleConflictFormData = reactive({
  roleid2: "",
  roleid2Name: "",
  conflictDesc: ""
});

const RoleRemoteSelectState = reactive({
  loadData: () =>
    roleServiceApi.queryList({}, { notRoleId: props.roleId, roleconflictId: props.roleId, appId: SYSTEM_CONFIG.APP_ID }),
  selectValueType: { labelKey: "roleName", valueKey: "roleId" } as SelectOptionKeyType
});

const RoleConflictFormDialogState = reactive({
  handleClose: () => {
    visibleRef.value = false;
  },
  //触发表单保存
  onOkButtonClick: () => {
    roleConflictServiceApi
      .saveInsert({
        ...RoleConflictFormData,
        appId: SYSTEM_CONFIG.APP_ID,
        resourceType: "MENU",
        roleid1: props.roleId
      })
      .then(res => {
        emit("save-success");
        visibleRef.value = false;
      });
  }
});
watch(
  () => props.visible,
  val => {
    visibleRef.value = val;
  }
);
watch(
  () => visibleRef.value,
  val => {
    emit("update:visible", val);
  }
);
</script>
<template>
  <el-dialog title="角色互斥表单" destroy-on-close width="40%" v-model="visibleRef">
    <el-form :rules="rules" label-position="top" :model="RoleConflictFormData">
      <el-row>
        <el-col :span="22" :offset="1">
          <el-form-item label="互斥角色" prop="roleid2">
            <jxtech-remote-select
              placeholder="请选择互斥角色"
              v-model:value="RoleConflictFormData.roleid2"
              :load-data="RoleRemoteSelectState.loadData"
              :select-value-type="RoleRemoteSelectState.selectValueType"
            ></jxtech-remote-select>
          </el-form-item>
        </el-col>
        <el-col :span="22" :offset="1">
          <el-form-item label="互斥描述">
            <el-input type="textarea" v-model="RoleConflictFormData.conflictDesc" />
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <template #footer>
      <jxtech-cancel-button @click="RoleConflictFormDialogState.handleClose"></jxtech-cancel-button>
      <jxtech-ok-button @click="RoleConflictFormDialogState.onOkButtonClick"></jxtech-ok-button>
    </template>
  </el-dialog>
</template>
<style scoped lang="scss"></style>
